<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加标签' : '编辑标签'" width="85%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<labelTable :needCheck="true" :selectedList="$props.selectedList" @selectionChange="selectionChange"></labelTable>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import { addLabel } from '/@/api/api';
import labelTable from '/@/components/goodsLabel/labelTable.vue';

const form = ref({});
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
	selectedList: {
		type: Array,
		default: () => [],
	},
});

const dialogVisible = ref(false);

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
	}
);

function selectionChange(val) {
	form.value.tags = val;
}

const emit = defineEmits(['tagSubmit', 'handleClose']);

async function submit() {
	// console.log(form.value)
	emit('tagSubmit', form.value.tags);
}

function handleClose() {
	form.value = {};
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
